import React, {useState, useRef} from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import {userReg} from '@a/index'
import {useNavigate} from 'umi'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
export default function index() {
  const navigate = useNavigate()
  const toFrom = useRef()
  //封装注册账户的接口请求
 const userReged = (params = {}) => {
  userReg(params).then(res => {
    console.log(res);
    if (res.data.code === 0) {
      Toast.show({
        content: '注册成功',
        afterClose: () => {
          navigate('/login')
        },
      })
    }
    if (res.data.code === 700) {
      Toast.show({
        content: '注册不成功',
        afterClose: () => {
          
        },
      })
    }
  })
 }
  //封装注册账户的接口请求

  //提交表单且数据验证成功后触发
  const onFinish = (values: any) => {
console.log(values);
userReged(
  {
    username: values.username,
    pwd: values.pwd
  }
  )
  //  navigate('/login')
  }
  //提交表单且数据验证成功后触发

  //提交表单且数据验证失败后触发
  const onFinishFailed = () => {
    toFrom.current?.resetFields()  //验证失败重置输入框
  }
  //提交表单且数据验证失败后触发

 //控制密码框内容的显示和隐藏状态
 const [visible, setVisible] = useState(false)
 //控制密码框内容的显示和隐藏状态
  return (
    <div className='vertical'>
      <Form
        ref={toFrom}
        layout='horizontal'
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        footer={
          <Button block type='submit' color='primary' size='small'>
           注册
          </Button>
          
        }
      >
<Form.Header>注册用户</Form.Header>
        <Form.Item
          name='username'
          label='用户名'
          rules={[
            {
              required: true,
              message: '用户名必填'
            },
            {
              pattern: /^[a-zA-Z]\w{3,7}$/,
              message: '用户名必须由4-8位英文数字下划线组成,必须字母开头'
            }
          ]}
        >
          <Input  placeholder='请输入用户名' />
        </Form.Item>


        <Form.Item
          name='pwd'
          label='密码'
          rules={[
            {
              required: true,
              message: '密码输入错误'
            },
            {
              pattern: /^[a-zA-Z1-9]\w{3,7}$/,
              message: '用户名必须由4-8位英文数字下划线组成,必须字母开头'
            }
          ]}
          extra={
            <div>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
        >
         <Input
              placeholder='请输入密码'
              clearable
              type={visible ? 'text' : 'password'}
            />
           
        </Form.Item>
      
      </Form>
      
    </div>
  )
}
